<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李宁登录页</title>
    <link rel="stylesheet" href="./denglu.css">
    
</head>

<body>
    <header>
        <h1><img src="./img/logo.png" alt=""></h1>
        <span><a href="../首页/login.html">李宁官方网站</a></span>
        <span><a href=""></a>欢迎注册</span>
    </header>
    <main id="main">
        <div class="center">
            <div><img src="./img/login-bg.png" alt=""></div>
            <!-- 表头 -->
            <form action="">
                <div class="inner">
                    <div class="top">
                        <div class="top-l">验证码登录</div>
                        <div>|</div>
                        <div class="top-r">密码登录</div>
                    </div>
                    <!-- 验证码登录 -->
                    <div class="yanzheng">
                        <div>
                            <span></span>
                            <input type="text" placeholder="请输入手机号" id="inp">
                        </div>
                        <div class="yanzhengma">
                            <div>
                                <span></span>
                                <div> <input type="text" placeholder="请输入验证码" id="ipt"></div>
                            </div>
                            <input type="button" value="获取验证码" id="but">   
                        </div>
                        <div class="tishi">!验证码已过期，请重新获取</div>
                    </div>
                    <!-- 密码登录 -->
                    <div class="mima">
                        <div>
                            <span></span>
                            <input type="text" placeholder="请输入手机号" id='txt'>
                        </div>
                        <div>
                            <span></span>
                            <input type="password" placeholder="请输入密码" id="pass">
                        </div>
                        <div class="tishi">!登录账户或密码不正确，请检查后重试</div>
                    </div>
                  
                    <button id="btn">登录</button>
                    <div ><a href="../注册/zhuce.html">免费注册 ></a></div>
                </div>
            </form>
        </div>
    </main>
    <footer>

        <p>获取帮助</p>
        <p>防伪查询</p>
        <p>售后服务</p>
        <p>校园代理</p>

    </footer>  
</body>
</html>
<script src="../jquery/jquery.min.js"></script>
<script>
    $('#main>.inner.top>.top-l').on('click',function(){
        $(this).style.color('rgb(241, 72, 42);')
        $('yanzheng').show()
        $('mima').hide()
        clear()
    })
    $('#main>.inner.top>.top-r').on('click',function(){
        $('mima').show()
        $('yanzheng').hide()
        clear()
    })
</script>